<script setup>
import { ref, onMounted ,watch } from 'vue'
import * as funCommon from "@/apis/common"

const emits = defineEmits(["emitImageUrl"])

const props = defineProps({
    folder: String,
    fileName: String,
    imageUrl: String,
    size: String
})
const uploadHeaders = $Common.uploadHeaders()
const uploadUrl = ref("")
const uploadData = ref({
    ContainerName: props.folder || "",
    Name: props.fileName || ""
})
const imgUrl = ref("")

onMounted(() => {
    // 数据初始化
    uploadUrl.value = $Common.uploadBaseUrl + "/files"
    imgUrl.value = props.imageUrl ? ($Tools.isUrl(props.imageUrl) ? props.imageUrl : ($Common.uploadBaseUrl + props.imageUrl)) : ""
})

watch(() => props.imageUrl, (val) => {
    imgUrl.value = val ? ($Tools.isUrl(val) ? val : ($Common.uploadBaseUrl + val)) : ""
})

const beforeAvatarUpload = (file) => {
    const isLt2M = file.size / 1024 / 1024 < 10
    if (!isLt2M) {
        $Common.errorMsg('上传图片大小不能超过 10MB!')
        return false
    }
    $Common.fullLoading()
    return true
}

const handleAvatarSuccess = (res, file) => {
    $Common.closeFullLoading()
    imgUrl.vue = $Common.uploadBaseUrl + res.url
    emitImageUrl(res)
}

const handleAvatarError = () => {
    $Common.closeFullLoading()
}

const showViewer = ref(false)
const viewImage = () => {
    showViewer.value = true
}

const showBtns = ref(false)
const mouseOver = () => {
    showBtns.value = true
}
const mouseLeave = (immed) => {
    showBtns.value = false
}

const deleteUrl = () => {
    // 删除
    emitImageUrl()
    // 删除服务器的图片
    funCommon.delBlob(imgUrl.value.replace($Common.uploadBaseUrl, "")).then(res => {
        imgUrl.value = ""
    }).catch(ex => {
        imgUrl.value = ""
    })
}

const emitImageUrl = (imgUrl) => {
    emits("emitImageUrl", imgUrl || "")
}

</script>

<template>
    <div class="comp-image-drag-upload" :class="size">
        <div class="images" v-if="imgUrl" @mouseover="mouseOver()" @mouseleave="mouseLeave()">
            <el-image class="image" :src="imgUrl"></el-image>
            <div class="btns" v-if="showBtns">
                <a class="btn" @click="viewImage()" title="查看">
                    <el-icon><View /></el-icon>
                </a>
                <el-upload class="btn edit" :show-file-list="false" title="修改"
                    accept="image/jpeg,image/gif,image/png"
                    :headers="uploadHeaders"
                    :action="uploadUrl" 
                    :data="uploadData"
                    :on-success="handleAvatarSuccess"
                    :on-error="handleAvatarError"
                    :before-upload="beforeAvatarUpload">
                    <el-icon><Edit /></el-icon>
                </el-upload>
                <a class="btn" @click="deleteUrl()" title="删除">
                    <el-icon><Delete /></el-icon>
                </a>
            </div>
        </div>
        <template v-else>
            <el-upload class="" drag :show-file-list="false"
                accept="image/jpeg,image/gif,image/png"
                :headers="uploadHeaders"
                :action="uploadUrl" 
                :data="uploadData"
                :on-success="handleAvatarSuccess"
                :on-error="handleAvatarError"
                :before-upload="beforeAvatarUpload">
                <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                <template v-if="!size">
                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                    <div class="el-upload__tip" slot="tip">只能上传jpg/png/gif文件，且不超过10MB</div>
                </template>
            </el-upload>
        </template>
        <el-image-viewer v-if="showViewer" @close="() => { showViewer = false }" :url-list="[imgUrl]"></el-image-viewer>
    </div>
</template>

<style lang="scss">
.comp-image-drag-upload {
    .el-upload-dragger {
      height: auto;
      .el-icon--upload {
        margin-bottom: 0;
      }
    }
    .el-upload__text {
      margin-bottom: 10px;
    }
    .el-upload__tip {
      margin: 0;
      color: #ff0000;
    }
    .el-image__error {
      min-height: 80px;
    }
    .images {
      margin: 0 10px 10px 0;
      float: left;
      max-width: 100%;
      height: auto;
      border-radius: 4px;
      position: relative;
      background-color: #fefefe;
      .image {
        display: block;
        background-color: #ffffff;
        border: 1px solid #e1edf7;
        box-sizing: border-box;
      }
      .btns {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.4);
      }
      .btn {
        margin: 0 6px;
        display: inline-block;
        width: 24px;
        height: 24px;
        line-height: 24px;
        text-align: center;
        background: #fefefe;
        border: 1px solid #ddd;
        border-radius: 3px;
        cursor: pointer;
        .el-icon {
            width: 24px;
            height: 24px;
        }
      }
      .btn.edit:hover {
        color: #409EFF;
      }
    }
    .image {
      width: 100%;
      height: auto;
      display: block;
    }
  }
  .size-36 {
    .el-upload-dragger {
      width: 36px;
      height: 36px;
      .el-icon-plus {
        font-size: 16px;
        margin: 0;
        line-height: 36px;
      }
      .el-image__error {
        min-height: 36px;
        font-size: 12px;
        line-height: 14px;
      }
    }
}
</style>